<template>
  <div pb-16rpx>
    <nut-toast ref="toastRef" cover />
    <div px-16rpx v-if="isShow">
      <div p-32rpx card mb-20rpx v-if="complainList.length" v-for="(item, index) in complainList" :key="index">
        <div text-24rpx text-right>
          {{ statusData[item.complainStatus] }}
        </div>
        <order overflow-hidden :res="item">
          <template #footer>
            <div mt-24rpx flex flex-a-c flex-j-sb>
              <div text-24rpx color-warmgray>
                {{ item.createTime }}
              </div>
              <div flex flex-a-c justify-end gap-16rpx>
                <nut-button
                  v-if="item.complainStatus != 'EXPIRED' && item.complainStatus != 'CANCEL'"
                  size="small"
                  @click.stop="
                    () => {
                      isShowCancelDialog = true
                      currentData = item
                    }
                  "
                  plain
                  type="primary">
                  撤销投诉
                </nut-button>
                <nut-button
                  @click="$navigateTo('/pages/mine/sue/detail?id=' + item.id + '')"
                  size="small"
                  type="primary"
                  plain>
                  投诉详情
                </nut-button>
              </div>
            </div>
          </template>
        </order>
      </div>
      <div v-else mt-100rpx>
        <empty text="暂无投诉内容" />
      </div>
    </div>
    <nut-dialog title="提示" content="是否撤销投诉？" v-model:visible="isShowCancelDialog" @ok="confirmCancel" />
    <!-- 加载 -->
    <nut-toast ref="toastRef" />
  </div>
</template>

<script setup lang="ts">
import { clearComplain } from '@/api/after-sale'
import { getComplainList } from '@/api/member'
import order from '@/components/basic-template/order.vue'
import empty from '@/components/empty/index.vue'
import type { Search } from '@/constants/types'
import { onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'
import type { ToastInst } from 'nutui-uniapp'
const searchForm = ref<Search>({
  pageNumber: 1,
  pageSize: 10
})
const currentData = ref<any>('')
const isShowCancelDialog = ref(false)
const isShow = ref(false)
const complainList = ref<any>([])
const couponData = ref<any>('')
const toastRef = ref<ToastInst>()
const statusData: any = {
  NEW: '新投诉',
  NO_APPLY: '未申请',
  APPLYING: '申请中',
  COMPLETE: '已完成',
  EXPIRED: '已失效',
  CANCEL: '已取消',
  WAIT_ARBITRATION: '等待仲裁',
  WAIT_APPEAL: '商家待申诉'
}
function init() {
  isShow.value = false
  complainList.value = []
  searchForm.value.pageNumber = 1
  fetchComplain()
}

async function confirmCancel() {
  try {
    toastRef.value?.showToast['loading']('加载中', {
      cover: true,
      duration: 0
    })
    isShowCancelDialog.value = false
    const res = await clearComplain(currentData.value.id)
    toastRef.value?.hideToast()
    if (res.data.success) {
      uni.showToast({
        title: '撤销成功',
        icon: 'none',
        duration: 2000
      })
      isShowCancelDialog.value = false
      init()
    }
  } catch (error) {
    toastRef.value?.hideToast()
  }
}

// 获取优惠券
async function fetchComplain() {
  uni.stopPullDownRefresh()
  const res = await getComplainList(searchForm.value)
  isShow.value = true
  if (res.data.success) {
    complainList.value.push(...res.data.result.records)
    couponData.value = res.data.result
  }
}

onPullDownRefresh(() => {
  init()
})
onReachBottom(() => {
  if (couponData.value?.total > searchForm.value.pageNumber * searchForm.value.pageSize) {
    searchForm.value.pageNumber++
    fetchComplain()
  }
})

onMounted(() => {
  init()
})
</script>

<style scoped></style>
